<template>
	<view class="notice-main" :style="{background}">
		<view v-show="showIcon" class="notice-icon">
			<uni-icons type="sound" size="25" :color="color"></uni-icons>
		</view>
		<view class="notice-box">
			<swiper class="notice-item" circular disable-touch autoplay easing-function="linear"
				:vertical="vertical"
				:interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in textlist" :key="index">
					<text class="text" :style="{color}">{{item.title}}</text>
				</swiper-item>
			</swiper>
		</view>
		<view v-show="showMore"
		class="notice-more" :style="{color}">
			查看更多
		</view>
	</view>
</template>

<script>
	export default {
		name:"u-notice",
		props:{
			textlist:{
				type:Array
			},
			vertical:{
				type:Boolean,
				default:false
			},
			interval:{
				type:[Number, String],
				default:2000
			},
			duration:{
				type:[Number, String],
				default:2000
			},
			showIcon:{
				type:Boolean,
				default:false
			},showMore:{
				type:Boolean,
				default:false
			},color:{
				type:String,
				default:'#f19e07'
			},background: {
				type: String,
				default: '#f7eddf'
			},
		},
		data() {
			return {};
		},
	}
</script>
<style lang="scss" scoped>
	$bg: #f5f5f5;
	$color: #333;
	.notice-main{
		background-color:$bg;
		padding:0 10rpx;
		display: flex;
		align-items: center;
	}
	.notice-icon{
		width: 70rpx;
		box-sizing: border-box;
		text-align: center;
	}
	.notice-more{
		box-sizing: border-box;
		width: 180rpx;
		font-size: 26rpx;
		color:$color;
		text-align: center;
	}
	.notice-box{
		width: 100%;
		box-sizing: border-box;
	}
	.notice-item{
		height: 100rpx;
	}
	.text{
		height:100%;
		color: $color;
		font-size:30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
	}
</style>
